<template>
    <div class="big_box">
        <div class="content1">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="content1box box1">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <p>今日应收(课程)</p>
                                <p>1000</p>
                                <p>昨日应收 0</p>
                            </el-col>
                            <el-col :span="12">
                                <p>今日应收 (商城)</p>
                                <p>0</p>
                                <p>昨日应收 0</p>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="content1box box2">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <p>今日新增会员</p>
                                <p>0</p>
                                <p>昨日新增会员0</p>
                            </el-col>
                            <el-col :span="12">
                                <p>累积会员</p>
                                <p>0</p>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="content1box box3">
                        <el-row :gutter="10">
                            <el-col :span="12">

                                <p>今日上课</p>
                                <p>0</p>
                                <p>昨日上课0</p>
                            </el-col>
                            <el-col :span="12">
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="content2">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="content2box box4">
                        <a href="">更多</a>
                        <el-tabs v-model="activeName" model-value="first" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="今日团课" name="first">
                                <el-row :gutter="10">
                                    <el-col :span="3">
                                        <p>12:30</p>
                                    </el-col>
                                    <el-col :span="2">
                                        <img src="../assets/u4411 (1).png" alt="">
                                    </el-col>
                                    <el-col :span="5">
                                        <h5>小弟</h5>
                                        <p>
                                            快速减脂训练
                                        </p>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="今日私教" name="second">
                                <el-row :gutter="10">
                                    <el-col :span="3">
                                        <p>12:40</p>
                                    </el-col>
                                    <el-col :span="2">
                                        <img src="../assets/u4411 (1).png" alt="">
                                    </el-col>
                                    <el-col :span="5">
                                        <h5>大哥</h5>
                                        <p>
                                            快速减脂训练
                                        </p>
                                    </el-col>
                                    
                                </el-row>
                                <el-row :gutter="10">
                                    <el-col :span="3">
                                        <p>12:40</p>
                                    </el-col>
                                    <el-col :span="2">
                                        <img src="../assets/u4411 (1).png" alt="">
                                    </el-col>
                                    <el-col :span="5">
                                        <h5>大哥</h5>
                                        <p>
                                            快速减脂训练
                                        </p>
                                    </el-col>
                                    
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="content2box box5">
                        <a href="">更多</a>
                        <el-tabs v-model="activeName" model-value="first" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="最新办卡" name="first">
                                <el-row :gutter="10">
                                    <el-col :span="3">
                                        <img src="../assets/u4445.png" alt="">
                                    </el-col>
                                    <el-col :span="15">
                                        <h5>小弟</h5>
                                        <p>
                                            快速减脂训练
                                        </p>
                                    </el-col>
                                    <el-col :span="5">
                                        <p>期限卡</p>
                                        <p>
                                            2023.05.06
                                        </p>
                                    </el-col>
                                </el-row>

                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="content3">
            <div class="xiaoshoue"><h5>商场销售额</h5></div>
            <div id="echartsbox"></div>
            <!-- <v-chart :options="chartOptions" /> -->
        </div>
    </div>
</template>
<script lang="ts">
import * as echarts from "echarts";
export default {
    mounted() {
        this.chart = echarts.init(document.getElementById("echartsbox"));
        let option = {
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["Mookopo0n", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: "line",
                    areaStyle: {},
                },
            ],
        };
        // chart.setOption({
        //  option,
        // });
        this.chart.setOption(option);
    },
};
// import { defineComponent, defineExpose } from 'vue'
// import * as echarts from 'echarts'
// export default defineComponent({
//   data() {
//     return {
//       chartOptions: {
//         title: {
//           text: 'ECharts 入门示例'
//         },
//         tooltip: {},
//         xAxis: {
//           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
//         },
//         yAxis: {},
//         series: [
//           {
//             name: '销量',
//             type: 'bar',
//             data: [5, 20, 36, 10, 10, 20]
//           }
//         ]
//       }
//     }
//   },

//   setup() {
//     // 在 setup 函数中进行 echarts 相关操作

//     // 将需要暴露给父组件的变量名传入 defineExpose
//     defineExpose({ chartOptions: this.chartOptions })

//     // 返回组件的 render 函数
//     return () => {
//       // 组件的模板代码
//     }
//   }
// })
//标签页
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>
<style lang="less" scoped>
//内容1 
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.content1 {
    .content1box {
        height: 110px;
        // border: 1px solid red;
        color: ghostwhite;

        p {
            margin-top: 10px;
            margin-left: 20px;
        }
    }

    .box1 {
        background-color: rgb(237, 85, 101);


    }

    .box2 {
        background-color: rgb(30, 150, 243);
    }

    .box3 {
        background-color: rgb(12, 195, 170);
    }
}

.content2box {
    border: 2px solid rgb(233, 234, 244);
    height: 300px;
    margin: 20px 0px 20px 0px;

    .box4 {
        position: relative;
    }

    a {
        position: absolute;
        margin: 10px 0px 0px 500px;
        text-decoration: none;
        color: rgb(0, 0, 0);
    }
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
#echartsbox {
     height: 400px;
     }
     .xiaoshoue{
        width: 100%;
        height: 40px;
        background-color: rgb(233, 238, 243);
        line-height: 40px;
     }
</style>